<template>
	<view class="evealuate">
		<view class="eveal_box public_sty">
			<view class="eveal_shopress">
				<view class="eveal_img"><image src="/static/uni.png" mode=""></image></view>
				<view class="eveal_title">
					<view class=""><text>华氏大药房 （陆家嘴店）</text></view>
					<text class="text_sty" style="letter-spacing: 4rpx;">
						月售
						<text>500</text>
					</text>
				</view>
			</view>
			<view class="eveal_shop">
				<view class="" style="margin-right: 20rpx;"><text>店铺评价</text></view>
				<uni-rate v-model="value" :size="19" :margin="10" active-color="#FF5F42"></uni-rate>
				<text style="font-size: 26rpx; color: #C0C0C0;" v-if="value == 1">非常差</text>
				<text style="font-size: 26rpx; color: #C0C0C0;" v-else-if="value == 2">差</text>
				<text style="font-size: 26rpx; color: #C0C0C0;" v-else-if="value == 3">一般</text>
				<text style="font-size: 26rpx; color: #C0C0C0;" v-else-if="value == 4">好</text>
				<text style="font-size: 26rpx; color: #C0C0C0;" v-else-if="value == 5">非常好</text>
			</view>
			<view class="eveal_value">
				<!-- <uni-icons type="compose" color="#C0C0C0" size="14"></uni-icons> -->
				<textarea v-model="evealate" placeholder-style="font-size:14px;color:#C0C0C0;" placeholder="感觉怎么样？跟大家分享一下吧~" style="height: 166rpx !important;" />
			</view>
			<view class="eveal_up">
				<view class="up_box" v-for="(item, index) in evealImg" :key="index"><image :src="item.img" mode=""></image></view>
			</view>
			<view class="eveal_radio">
				<radio-group name="">
					<label>
						<radio value="" style="transform:scale(0.7)" :checked="radioStatus" @click="radioCheck" />
						<text>匿名评价</text>
					</label>
				</radio-group>
			</view>
		</view>
		<view class="eveal_btn public_sty" @click="eveatDelete">
			<button type="default"><text>删除评价</text></button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			value: 1,
			evealate: '评价评价评价评价评价评价评价评价评价评价评价评价评价评价评价评价评价评价评价评价评价',
			radioStatus: true,
			evealImg: [
				{
					img: '/static/uni.png'
				},
				{
					img: '/static/uni.png'
				},
				{
					img: '/static/uni.png'
				},
				{
					img: '/static/uni.png'
				}
			]
		};
	},
	methods: {
		radioCheck() {
			this.radioStatus = !this.radioStatus;
		},
		// 删除
		eveatDelete() {
			uni.showModal({
				content: '确定删除这条评价吗?',
				cancelText: '确定',
				cancelColor: '#666666',
				confirmText: '取消',
				confirmColor: '#00B359',
				success: res => {
					if (res.confirm) {
						console.log('用户点击取消');
					} else if (res.cancel) {
						console.log('用户点击确定');
					}
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.evealuate {
	padding: 30rpx;
	position: relative;
	.eveal_box {
		padding: 40rpx 30rpx;
		.eveal_shopress {
			display: flex;
			.eveal_img {
				margin-right: 20rpx;
				image {
					width: 100rpx;
					height: 100rpx;
				}
			}
		}
		.eveal_shop {
			display: flex;
			margin-top: 48rpx;
		}
		.eveal_value {
			display: flex;
			margin-top: 74rpx;
			/deep/ .uni-icons {
				position: relative;
				top: -6rpx;
				margin-right: 10rpx;
			}
		}
		.eveal_up {
			display: flex;
			flex-wrap: wrap;
			.up_box {
				border-radius: 20rpx;
				margin: 0rpx 10rpx;
				image {
					width: 190rpx;
					height: 190rpx;
				}
			}
			.up_icon {
				width: 190rpx;
				height: 190rpx;
				border: 1px solid;
				margin: 0rpx 10rpx;
			}
		}
		.eveal_radio {
			margin-top: 38rpx;
		}
	}
}
.text_sty {
	color: #666666;
	font-size: 22rpx;
}
.eveal_btn {
	margin-top: 60rpx;
	text {
		font-size: 30rpx;
	}
	button {
		background-color: #ffffff;
		border: 1rpx solid #e5e5e5;
		box-shadow: 0rpx 0rpx 66rpx 0rpx rgba(59, 67, 83, 0.05);
		border-radius: 20rpx;
	}
}
</style>
